<template>
	<view ref="wrapper" class="wrapper" :style="'height:' + WindowInfo.windowHeight + 'px'">
		<view class="header-box">
			<u-navbar height="120rpx" safeAreaInsetTop placeholder bgColor="#FFFFFF"
				titleStyle="font-size: 16px; font-weight: 500; color: #000000;" class="navbar" @leftClick="backChat">
				<view class="u-center-slot" slot="center" v-if="isModule == 'true'">
					<view class="nav-title omit">{{
            getGroupInfo(groupId).groupName
          }}
						<view class="customer" v-if="getGroupInfo(groupId).moduleType == 6 && userInfo.isCustomer == 0">
							{{$t('official.OfficialCustomerService')}}
						</view>
					</view>
					<view class="nav-members" v-show="isModule == 'true' && typing.indexOf(groupId) != -1">{{ $t("Typing") }}
					</view>
					<view v-show="isModule == 'true' && typing.indexOf(groupId) == -1">
						<view class="nav-members">{{
              getTimeDiff(specialUserInfo.lastLoginTime, "minutes", true, -3)
            }}</view>
						<!-- <view class="nav-status">{{ $t("chat.Online") }}</view> -->
					</view>
				</view>
				<view class="u-center-slot" slot="center" v-else>
					<view class="nav-title omit">{{
            getGroupInfo(groupId).groupName
          }}</view>
					<view class="nav-members">
						{{ groupIsDelete ? $t("contacts.groupAlreadyLeave") : (groupMemberInfo && groupMemberInfo.length > 0 ? (groupMemberInfo.length - 1) : 0) + $t("chat.members") }}
					</view>
				</view>
				<view class="u-right-slot" slot="right" @click="handleDetail"
					v-if="isModule == 'true' || (isModule != 'true' && groupMemberInfo && groupMemberInfo.length > 0)">
					<u-icon name="more-dot-fill" color="#000000" size="20px"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 语音消息 -->
		<view class="record-content" v-if="recorderManagerOpen">
			<view class="seconds">{{ duration }}</view>
		</view>
    <!--  :style="chatBoxStyle" -->
		<scroll-view class="chat-box" scroll-y="true" :scroll-into-view="scrollIntoView"
			@scrolltoupper="scrollToUpper" @click="clickBlank">
			<view style="width: 100%; height: 30rpx"></view>
			<view v-for="(item, index) in avatorIsShow" :key="item.messageUId" :id="`S-${item.messageUId}`">
				<!-- 日期：月日  -->
				<view class="char-time" v-if="item.time">November 7</view>
				<!--      <view
          v-if="
            item.messageType != 'OL:ReadStatus' &&
            item.messageType != 'RC:RcCmd'
          "
        > -->
				<!-- 我发的信息 -->
				<view v-if="item.senderUserId == userId" @click="selectMsgHandle(item)">
					<view class="chat-line chat-right" :id="`index${index}`">
						<!-- 多选时出现的选择框 -->
						<view class="my-select-icon" v-if="selectShow && item.messageType !== 'OL:Prerender'">
							<view class="unselect-icon" v-if="
                  selectShow && selectMsgIds.indexOf(item.messageUId) === -1
                "></view>
							<i class="iconfont icon-duoxuan-xuanzhong select-icon" v-else></i>
						</view>
						<view class="chat-line__container" style="margin-right: -24rpx">
							<!-- 消息底部时间，以及发送状态 -->
							<!-- <view
                class="char-hour char-hour-right char-hour-success"
                v-if="item.messageType != 'RC:RcCmd'"
                style="margin: 0rpx 24rpx 10rpx 0rpx"
              >
                <view>
                  <text>{{ weChatTimeFormat(item.sentTime) }}</text>
										<i
										  class="iconfont icon-yidu read-icon"
										  v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"
										></i>
										<i
										  class="iconfont icon-yidu icon-yifasong"
										  v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'"
										  style="margin-left: 6rpx"
										></i>
										<i
										  class="iconfont icon-yidu read-icon"
										  v-else-if="item.messageType !== 'OL:Prerender'"
										></i>
                </view>
              </view> -->
							<!-- 普通文本信息 -->
							<view class="connect-block-right" v-if="item.messageType == 'RC:TxtMsg'"
								@longpress="longTap(index, true, item)" @touchend="touchEnd" @touchmove="touchMove">
								<text v-html="setLinkTextOpenToHtml(item.content.content)"></text>
								<view class="time-msg time-file">
									<text>{{ weChatTimeFormat(item.sentTime) }}</text>
									<i class="iconfont icon-yidu read-icon"
										v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
									<i class="iconfont icon-yidu icon-yifasong"
										v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'" style="margin-left: 6rpx"></i>
									<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
								</view>
							</view>
							<!-- 图片信息 -->
							<view v-else-if="item.messageType == 'RC:ImgMsg' && !item.expansion" class="char-pic"
								@longpress="longTap(index, true, item)" @touchend="touchEnd" @touchmove="touchMove">
								<image class="char-pic" :src="item.content.content" style="margin: 0;border: unset"
									@click="showPreview(item.content.imageUri)" mode="aspectFill"></image>

								<view class="time-msg time-pic">
									<text>{{ weChatTimeFormat(item.sentTime) }}</text>
									<i class="iconfont icon-yidu read-icon"
										v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
									<i class="iconfont icon-yidu icon-yifasong"
										v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'" style="margin-left: 6rpx"></i>
									<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
								</view>
							</view>
							<!-- 图片带文字 -->
							<view class="connect-block-right" style="padding: 0px; overflow: hidden"
								v-else-if="item.messageType == 'RC:ImgMsg' && item.expansion" @longpress="longTap(index, true, item)"
								@touchend="touchEnd" @touchmove="touchMove">
								<view class="video-bg">
									<image :src="item.content.content" mode="aspectFill" class="char-pic"
										style="border-radius: unset; border: unset; margin: unset"
										@click="showPreview(item.content.imageUri)"></image>
								</view>
								<view v-html="setLinkTextOpenToHtml(item.expansion.content)" style="padding: 20upx"></view>
								<view class="time-msg time-text-file">
									<text>{{ weChatTimeFormat(item.sentTime) }}</text>
									<i class="iconfont icon-yidu read-icon"
										v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
									<i class="iconfont icon-yidu icon-yifasong"
										v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'" style="margin-left: 6rpx"></i>
									<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
								</view>
							</view>
							<!-- 视频信息 -->
							<view v-else-if="item.messageType == 'RC:SightMsg' && !item.expansion"
								style="width: 300rpx; height: 300rpx; border-radius: 20rpx 0rpx 20rpx 20rpx; overflow: hidden; margin-right: 24rpx; position: relative;"
								@longpress="longTap(index, true, item)" @touchend="touchEnd" @touchmove="touchMove">
								<j-video :key="item.messageUId" play-btn-position="center" :danmu-btn="true" :controls="false"
									:url="item.content.sightUrl" :poster="item.content.content" style="width: 300rpx; height: 300rpx;" />
								<!-- 视频左上角的视频时长 -->
								<view class="video-duration_top">
									00:{{ item.content.duration }}
									<img src="@/static/image/chat/video-time.png" class="video-icon" />
								</view>
								<view class="time-msg time-pic">
									<text>{{ weChatTimeFormat(item.sentTime) }}</text>
									<i class="iconfont icon-yidu read-icon"
										v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
									<i class="iconfont icon-yidu icon-yifasong"
										v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'" style="margin-left: 6rpx"></i>
									<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
								</view>
							</view>
							<!-- 视频带文字 -->
							<view class="connect-block-right" style="padding: 0px; overflow: hidden"
								v-else-if="item.messageType == 'RC:SightMsg' && item.expansion" @longpress="longTap(index, true, item)"
								@touchend="touchEnd" @touchmove="touchMove">
								<view class="video-bg">
									<j-video :key="item.messageUId" play-btn-position="center" :danmu-btn="true" :controls="false"
										:url="item.content.sightUrl" :poster="item.content.content" style="width: 300rpx; height: 300rpx" />
									<!-- 视频左上角的视频时长 -->
									<view class="video-duration_top">
										00:{{ item.content.duration }}
										<img src="@/static/image/chat/video-time.png" class="video-icon" />
									</view>
								</view>
								<view v-html="setLinkTextOpenToHtml(item.expansion.content)" style="padding: 20upx"></view>
								<view class="time-msg time-text-file">
									<text>{{ weChatTimeFormat(item.sentTime) }}</text>
									<i class="iconfont icon-yidu read-icon"
										v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
									<i class="iconfont icon-yidu icon-yifasong"
										v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'" style="margin-left: 6rpx"></i>
									<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
								</view>
							</view>
							<!-- 通话信息 -->
							<view class="chart-call connect-block-right" v-else-if="item.type == 'call'">
								<image class="call-my-icon" :src="callIcon.myCall" mode=""></image>
								<text>{{
                  getCalledContent(
                    item.content.callState,
                    item.content.duration
                  )
                }}</text>
							</view>
							<!-- 语音信息 -->
							<view class="chart-voice connect-block-right" v-else-if="item.messageType == 'RC:HQVCMsg'"
								@tap="playVoice(item)" @longpress="longTap(index, true, item)" @touchend="touchEnd"
								@touchmove="touchMove">
								<view class="progress-background" :style="
                    item.content.progress
                      ? `width: ${item.content.progress}%`
                      : 'width: 0;opacity: 0'
                  "></view>
								<view class="iconfont icon-bofang voice-icon voice-icon-shadow" v-show="!item.content.progress"></view>
								<image src="@/static/image/chart/play-right.png" class="play-right" v-show="item.content.progress" />
								<view class="iconfont icon-jindutiao progress-icon"></view>
								<text>{{ item.content.duration }}''</text>
								<view class="time-msg time-voice">
									<text>{{ weChatTimeFormat(item.sentTime) }}</text>
									<i class="iconfont icon-yidu read-icon"
										v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
									<i class="iconfont icon-yidu icon-yifasong"
										v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'" style="margin-left: 6rpx"></i>
									<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
								</view>
							</view>
							<!-- 文件信息 -->
							<view class="connect-block-right" style="padding: 20upx" v-else-if="item.messageType == 'RC:FileMsg'"
								@longpress="longTap(index, true, item)" @touchend="touchEnd" @touchmove="touchMove">
								<view class="chart-call" style="padding: 0upx" @click="handleSeeFiles(item)">
									<view class="file-type-cicle">
										<image src="@/static/image/chart/file_my.png" class="file-type-image"></image>
										<view class="file-type-keyword" v-if="item.content">{{
                      identifyFileType(item.content.name)
                        .slice(0, 1)
                        .toUpperCase()
                    }}</view>
									</view>
									<view class="chart-file-container">
										<view class="file-content">
											<text>{{ item.content.name }}</text>
										</view>
										<text class="file-size">{{
                      getSize(item.content.size)
                    }}</text>
									</view>
								</view>
								<view v-html="setLinkTextOpenToHtml(item.expansion.content)"
									v-if="item.expansion && item.expansion.content" style="margin-top: 20upx"></view>
								<view class="time-msg time-text-file_2">
									<text>{{ weChatTimeFormat(item.sentTime) }}</text>
									<i class="iconfont icon-yidu read-icon"
										v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
									<i class="iconfont icon-yidu icon-yifasong"
										v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'" style="margin-left: 6rpx"></i>
									<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
								</view>
							</view>
							<!-- 转账信息 -->
							<view class="chart-transfer" :style="item.content.state == 1 ? 'opacity: 0.7' : ''"
								v-else-if="item.type == 'transfer'" @longpress="longTap(index, true, item)" @touchend="touchEnd"
								@touchmove="touchMove">
								<view class="chart-transfer__top">
									<view class="iconfont my-icon" :class="
                      item.content.state == 1
                        ? 'icon-queren'
                        : 'icon-zhuanzhang'
                    "></view>
									<view class="chart-transfer__top__container">
										<view>${{ item.content.money }}</view>
										<view>{{
                      item.content.state == 1
                        ? "Received"
                        : "You initiated a transfer"
                    }}</view>
									</view>
								</view>
								<view class="chart-transfer__bottom"> Transfer </view>
							</view>
							<!-- 撤回 -->
							<view v-else-if="item.messageType == 'RC:RcCmd'" class="recall-message"></view>
							<!-- 名片 -->
							<view v-else-if="item.messageType == 'OL:Card'" class="msgs-classic card-box"
								@click="toShowCardMsg(item.content.info)" @longpress="longTap(index, true, item)" @touchend="touchEnd"
								@touchmove="touchMove">
								<view class="card-content">
									<image :src="
                      item.content.info.avatarCompress || item.content.info.avatar
                    " v-if="isPeopleAvatarExit(item.content.info.avatarCompress || item.content.info.avatar)" alt=""
										class="card-img" mode="aspectFill" />
									<view v-else-if="item.content.info" class="card-img avator-font-setting"
										:style="{ background: `${getDefaultColor(item.content.info.avatarColorCode)}`, fontSize: '30upx', fontWeight: '400' }">
										{{ formatUserName(item.content.info).slice(0, 1) }}
									</view>
									<view class="card-name omit">{{
                    formatUserName(item.content.info)
                  }}</view>
								</view>

								<view class="card-bottom">
									{{ $t("contacts.contact") }}
									<view class="time-msg time-card">
										<text>{{ weChatTimeFormat(item.sentTime) }}</text>
										<i class="iconfont icon-yidu read-icon"
											v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
										<i class="iconfont icon-yidu icon-yifasong"
											v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'"
											style="margin-left: 6rpx"></i>
										<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
									</view>
								</view>
							</view>
							<!-- 回复消息 -->
							<view class="msgs-classic card-box" @contextmenu.prevent="onContextmenu($event, item)"
								v-if="item.messageType == 'OL:Recall'" @click="toFindPosition(item.content.recallMsg)"
								@longpress="longTap(index, true, item)" @touchend="touchEnd" @touchmove="touchMove">
								<RecallMsgBox :msgInfo="item.content.recallMsg" type="my"></RecallMsgBox>
								<view class="card-bottom" style="font-size: 28rpx; color: #ffffff; padding-top: 0rpx">
									<view class="time-msg time-recall">
										<text>{{ weChatTimeFormat(item.sentTime) }}</text>
										<i class="iconfont icon-yidu read-icon"
											v-if="readTime && readTime >= item.sentTime && isModule == 'true' && item.messageType !== 'OL:Prerender'"></i>
										<i class="iconfont icon-yidu icon-yifasong"
											v-else-if="isModule == 'true' && item.messageType !== 'OL:Prerender'"
											style="margin-left: 6rpx"></i>
										<i class="iconfont icon-yidu read-icon" v-else-if="item.messageType !== 'OL:Prerender'"></i>
									</view>
									<text v-html="setLinkTextOpenToHtml(item.content.content)"></text>
								</view>
							</view>
							<view v-else-if="item.messageType == 'OL:Prerender'" @contextmenu.prevent="onContextmenu($event, item)"
								@longpress="longTap(index, false, item)">
								<preRenderShow :fileObj="item"></preRenderShow>
							</view>
							<view v-else-if="item.messageType == 'OL:WorkTickets' && isModule == 'true'"
								@contextmenu.prevent="onContextmenu($event, item)" @longpress="longTap(index, false, item)">
								<WorkTickets :obj="item" :readTime="readTime"></WorkTickets>
							</view>
						</view>
						<!-- 头像 -->
						<!-- <image
                :src="userInfo.avatar"
                class="avatar"
                v-if="item.messageType != 'RC:RcCmd'"
                mode="aspectFill"
              ></image> -->
					</view>
				</view>

				<!-- 对方发的信息 -->
				<view v-else @click="selectMsgHandle(item)">
					<view class="chat-line" :id="`index${index}`">
						<!-- :style="!item.showAvatorNow ? 'margin-top: 20upx;' : ''" -->
						<!-- 多选时出现的选择框 -->
						<view class="my-select-icon" v-if="selectShow">
							<view class="unselect-icon" v-if="
                  selectShow && selectMsgIds.indexOf(item.messageUId) === -1
                "></view>
							<i class="iconfont icon-duoxuan-xuanzhong select-icon" v-else></i>
						</view>
						<!-- 头像 -->
						<view class="avatar avator-font-setting" :style="{
                background: `${getDefaultColor(item.info.avatarColorCode)}`,
                fontSize: '30upx',
                fontWeight: '400',
              }" @click="toPeopleInformation(item.info)" v-if="
                !isPeopleAvatarExit(
                  isModule == 'true'
                    ? getGroupInfo(groupId).avatarCompress ||
                        getGroupInfo(groupId).avatar
                    : item.info && (item.info.avatarCompress || item.info.avatar)
                ) && item.showAvatorNow
              ">
							{{ (isModule == 'true' ? getGroupInfo(groupId).groupName : ((item.info && item.info.defaultName) || (item.info && formatUserName(item.info.userVo)))).slice(0, 1) }}
						</view>
						<image @click="toPeopleInformation(item.info)" :src="
                isModule == 'true'
                  ? getGroupInfo(groupId).avatarCompress ||
                    getGroupInfo(groupId).avatar
                  : item.info && (item.info.avatarCompress || item.info.avatar)
              " class="avatar" mode="aspectFill" v-else-if="item.showAvatorNow">
						</image>
						<view class="avatar" v-else></view>
						<view class="chat-line__container">
							<!-- 群聊用户姓名 -->
							<view class="chat-line__container__name" v-if="item.showAvatorNow">
								<view class="omit" v-if="isModule == 'true' && false">{{
                  getGroupInfo(groupId).groupName
                }}</view>
								<view class="omit" v-else-if="isModule != 'true'">{{
                  (item.info && formatUserName(item.info))
                }}</view>
								<!--     <view class="char-hour" style="margin: 0rpx 0rpx 0rpx 20rpx">
                  {{ weChatTimeFormat(item.sentTime) }}
                </view> -->
							</view>
							<!-- 普通文本信息 -->
							<view class="connect-block-left" v-if="item.messageType == 'RC:TxtMsg'"
								@longpress="longTap(index, false, item)" @touchend="touchEnd" @touchmove="touchMove">
								<text v-html="setLinkTextOpenToHtml(item.content.content)"></text>
								<view class="time-msg time-file">{{ weChatTimeFormat(item.sentTime) }}</view>
							</view>
							<!-- 图片信息 -->
							<view v-else-if="item.messageType == 'RC:ImgMsg' && !item.expansion" class="char-pic char-pic-left"
								@longpress="longTap(index, false, item)" @touchend="touchEnd" @touchmove="touchMove">
								<image :src="item.content.content" mode="aspectFill" class="char-pic char-pic-left"
									style="margin: 0;border: unset" @click="showPreview(item.content.imageUri)"></image>
								<view class="time-msg time-pic">{{ weChatTimeFormat(item.sentTime) }}</view>
							</view>
							<!-- 图片带文字 -->
							<view class="connect-block-left" style="padding: 0px; overflow: hidden"
								v-else-if="item.messageType == 'RC:ImgMsg' && item.expansion" @longpress="longTap(index, false, item)"
								@touchend="touchEnd" @touchmove="touchMove">
								<view class="video-bg">
									<image :src="item.content.content" mode="aspectFill" class="char-pic"
										style="border-radius: unset; border: unset; margin: unset"
										@click="showPreview(item.content.imageUri)"></image>
								</view>
								<view v-html="setLinkTextOpenToHtml(item.expansion.content)" style="padding: 20upx 20upx 0upx"></view>
								<view class="time-msg time-text-file">{{ weChatTimeFormat(item.sentTime) }}</view>
							</view>
							<!-- 视频信息 -->
							<view v-else-if="item.messageType == 'RC:SightMsg' && !item.expansion"
								style="width: 300rpx; height: 300rpx; border-radius: 0rpx 20rpx 20rpx 20rpx; overflow: hidden; margin-left: 24rpx; position: relative;"
								@longpress="longTap(index, false, item)" @touchend="touchEnd" @touchmove="touchMove">
								<j-video :key="item.messageUId" play-btn-position="center" :danmu-btn="true" :controls="false"
									:url="item.content.sightUrl" :poster="item.content.content" style="width: 300rpx; height: 300rpx;" />
								<!-- 视频左上角的视频时长 -->
								<view class="video-duration_top">
									00:{{ item.content.duration }}
									<img src="@/static/image/chat/video-time.png" class="video-icon" />
								</view>
								<view class="time-msg time-pic">{{ weChatTimeFormat(item.sentTime) }}</view>
							</view>
							<!-- 视频带文字 -->
							<view class="connect-block-left" style="padding: 0px; overflow: hidden"
								v-else-if="item.messageType == 'RC:SightMsg' && item.expansion" @longpress="longTap(index, false, item)"
								@touchend="touchEnd" @touchmove="touchMove">
								<view class="video-bg">
									<j-video :key="item.messageUId" play-btn-position="center" :danmu-btn="true" :controls="false"
										:url="item.content.sightUrl" :poster="item.content.content" style="width: 300rpx; height: 300rpx" />
									<!-- 视频左上角的视频时长 -->
									<view class="video-duration_top">
										00:{{ item.content.duration }}
										<img src="@/static/image/chat/video-time.png" class="video-icon" />
									</view>
								</view>
								<view v-html="setLinkTextOpenToHtml(item.expansion.content)" style="padding: 20upx 20upx 0upx"></view>
								<view class="time-msg time-text-file">{{ weChatTimeFormat(item.sentTime) }}</view>
							</view>
							<!-- 通话信息 -->
							<view class="chart-call connect-block-left" v-else-if="item.type == 'call'"
								@longpress="longTap(index, false, item)" @touchend="touchEnd" @touchmove="touchMove">
								<image class="call-my-icon" :src="
                    item.content.callState == 0
                      ? callIcon.errorCall
                      : callIcon.successCall
                  " mode="">
								</image>
								<text>{{
                  getCalledContent(
                    item.content.callState,
                    item.content.duration
                  )
                }}</text>
							</view>
							<!-- 语音信息 -->
							<view class="chart-voice connect-block-left chart-voice-left" v-else-if="item.messageType == 'RC:HQVCMsg'"
								@tap="playVoice(item)" @longpress="longTap(index, false, item)" @touchend="touchEnd"
								@touchmove="touchMove">
								<view class="progress-background" :style="
                    item.content.progress
                      ? `width: ${item.content.progress}%`
                      : 'width: 0;opacity: 0'
                  "></view>
								<view class="video-back-box">
									<view class="iconfont icon-bofang voice-icon" v-show="!item.content.progress">
									</view>
									<!-- <view class="iconfont icon-a-tingzhibofang_huaban1  voice-icon " v-else></view> -->
									<image src="@/static/image/chart/play-left.png" class="play-right" v-show="item.content.progress" />
								</view>
								<view class="iconfont icon-jindutiao progress-icon"></view>
								<text>{{ item.content.duration }}''</text>
								<text class="time-msg time-voice">{{ weChatTimeFormat(item.sentTime) }}</text>
							</view>
							<!-- 文件信息 -->
							<view class="connect-block-left file-left" style="padding: 20upx 20upx 0upx"
								v-else-if="item.messageType == 'RC:FileMsg'" @longpress="longTap(index, false, item)"
								@touchend="touchEnd" @touchmove="touchMove">
								<view class="chart-call" style="padding: 0upx" @click="handleSeeFiles(item)">
									<view class="file-type-cicle">
										<image src="@/static/image/chart/file_side.png" class="file-type-image"></image>
										<view class="file-type-keyword" v-if="item.content">{{
                      identifyFileType(item.content.name)
                        .slice(0, 1)
                        .toUpperCase()
                    }}</view>
									</view>
									<view class="chart-file-container">
										<view class="file-content">
											<text>{{ item.content.name }}</text>
										</view>
										<text class="file-size file-size-left">{{
                      getSize(item.content.size)
                    }}</text>
									</view>
								</view>
								<view v-html="setLinkTextOpenToHtml(item.expansion.content)"
									v-if="item.expansion && item.expansion.content" style="margin-top: 20upx; color: rgba(0, 0, 0, 0.8);">
								</view>
								<view class="time-msg time-text-file_2">{{ weChatTimeFormat(item.sentTime) }}</view>
							</view>
							<!-- 转账信息 -->
							<view class="chart-transfer chart-transfer-left" :style="item.content.state == 1 ? 'opacity: 0.7' : ''"
								v-else-if="item.type == 'transfer'" @longpress="longTap(index, false, item)" @touchend="touchEnd"
								@touchmove="touchMove">
								<view class="chart-transfer__top">
									<view class="iconfont my-icon" :class="
                      item.content.state == 1
                        ? 'icon-queren'
                        : 'icon-zhuanzhang'
                    "></view>
									<view class="chart-transfer__top__container">
										<view>${{ item.content.money }}</view>
										<view>{{
                      item.content.state == 1 ? "Paid" : "Please collect"
                    }}</view>
									</view>
								</view>
								<view class="chart-transfer__bottom"> Transfer </view>
							</view>
							<!-- 撤回 -->
							<view v-else-if="item.messageType == 'RC:RcCmd'" class="recall-message" style="margin-left: 90upx"></view>
							<!-- 名片 -->
							<view v-else-if="item.messageType == 'OL:Card'" class="msgs-classic card-box card-left"
								@click="toShowCardMsg(item.content.info)" @longpress="longTap(index, false, item)" @touchend="touchEnd"
								@touchmove="touchMove">
								<view class="card-content" style="border-bottom: 2rpx solid rgba(0, 0, 0, 0.05)">
									<image :src="
                      item.content.info.avatarCompress || item.content.info.avatar
                    " v-if="isPeopleAvatarExit(item.content.info.avatarCompress || item.content.info.avatar)" alt=""
										class="card-img" mode="aspectFill" />
									<view v-else-if="item.content" class="card-img avator-font-setting"
										:style="{ background: `${getDefaultColor(item.content.info.avatarColorCode)}`, fontSize: '30upx', fontWeight: '400' }">
										{{ formatUserName(item.content.info).slice(0, 1) }}
									</view>
									<view class="card-name omit" style="color: #000000">{{
                    formatUserName(item.content.info)
                  }}</view>
								</view>

								<view class="card-bottom" style="color: rgba(0, 0, 0, 0.3)">
									{{ $t("contacts.contact") }}
									<view class="time-msg time-card">{{ weChatTimeFormat(item.sentTime) }}</view>
								</view>
							</view>
							<!-- 回复消息 -->
							<view class="msgs-classic card-box card-left" @contextmenu.prevent="onContextmenu($event, item)"
								v-if="item.messageType == 'OL:Recall'" @click="toFindPosition(item.content.recallMsg)"
								@longpress="longTap(index, false, item)" @touchend="touchEnd" @touchmove="touchMove">
								<RecallMsgBox :msgInfo="item.content.recallMsg"></RecallMsgBox>
								<view class="card-bottom" style="
                    font-size: 28rpx;
                    color: rgba(0, 0, 0, 0.8);
                    padding-top: 0rpx;
                  ">
									<text v-html="setLinkTextOpenToHtml(item.content.content)"></text>
									<text class="time-msg time-recall">{{ weChatTimeFormat(item.sentTime) }}</text>
								</view>
							</view>
							<view v-else-if="item.messageType == 'OL:WorkTickets' && isModule == 'true'"
								@contextmenu.prevent="onContextmenu($event, item)" @longpress="longTap(index, false, item)">
								<WorkTickets :obj="item" :my="false" :readTime="readTime"></WorkTickets>
							</view>
						</view>
					</view>

					<!-- 消息底部时间，以及发送状态 -->
					<view class="char-hour" v-if="item.messageType != 'RC:RcCmd' && false">
						<!-- state -->
						{{ weChatTimeFormat(item.sentTime) }}
					</view>
				</view>
			</view>

			<!-- </view> -->
		</scroll-view>

		<view class="bottom-box" id="chat-bottom-input" :style="{paddingBottom: keyHeight + 'px'}">
			<atPopup ref="at" @confirm="atConfirm" :groupMemberInfo="selectMemberInfo"
				:bottom="keyHeight == 0 ? '110rpx' : keyHeight + 'px'"></atPopup>
			<view class="input-line" v-show="!selectShow">
				<view class="iconfont icon-yuyin bottom-icon" @click="changeRecord(true)" v-if="!isRecord"></view>
				<view class="iconfont icon-jianpan bottom-icon" @click="changeRecord(false)" v-if="isRecord"></view>
				<textarea auto-height ref="scanTextbox" v-if="!isRecord" :cursor="blurIndex" :focus="isInputFocus"
					@focus="typingInputFocus" @blur="typingInputBlur" @click="clickInput" :placeholder="$t('chat.Message')"
					class="message-input ml-10 mr-l0" placeholder-style="font-size: 26upx;color: #878787;" :confirm-hold="true"
					@confirm="handleSendMessage" v-model="messageContent" :adjust-position="false" cursor-spacing="15"
					maxlength="-1" :always-embed="true" @keydown.native="sendTypingStatus" />
				<view class="message-input ml-10 mr-l0 record-box" v-if="isRecord" @touchstart.prevent="startRecord"
					@touchend.prevent="overRecord" @touchcancel.prevent="overRecord">
					{{recorderManagerOpen?$t('chat.Release-send'): $t('chat.Hold-speak')}}
				</view>
				<view class="iconfont icon-gengduo1 bottom-icon" @click="changeBottomType('tools')"
					v-if="messageContent.length < 1"></view>
				<image class="send-icon" :src="require('@/static/image/chat/send.png')" v-else
					@touchend.prevent="handleSendMessage"></image>
				<view class="iconfont icon-emoji bottom-icon emoji-icon-ab" @click="changeBottomType('emoji')"
					v-if="!isRecord && inputBottomType != 'emoji'"></view>
				<view class="iconfont icon-jianpan bottom-icon emoji-icon-ab" @click="changeRecord(false)"
					v-if="!isRecord && inputBottomType == 'emoji'"></view>
			</view>
			<!-- 多选操作 -->
			<MultipleSelection :disabled="selectMsgIds.length === 0" :show.sync="selectShow"
				@onMultipleDelete="onMultipleDelete" @onMultipleForward="onMultipleForward"></MultipleSelection>

			<!-- 回复样式 -->
			<RecallBox :msgInfo="recallMsgInfo" :show.sync="recallBoxShow" v-show="recallBoxShow && !selectShow">
			</RecallBox>

			<!-- 工具栏 -->
			<u-transition :show="
          (inputBottomType == 'tools' || inputBottomType == 'emoji') &&
          !selectShow
        " mode="slide-up" duration="160">
				<!-- 表情 -->
				<EmojiMenu :show="inputBottomType == 'emoji' && !selectShow" @select="selectEmoji"></EmojiMenu>
				<view class="input-tools" v-show="inputBottomType == 'tools' && !selectShow">
					<view class="input-tools__item" v-for="item in tools" :key="item.type" @click="clickToolHandle(item)">
						<view v-if="item.type == 'Photo'">
							<u-upload @afterRead="afterRead" name="1" multiple :maxCount="1" width="250" height="150">
								<view class="input-tools__item__top">
									<view class="iconfont tool-icon" :class="item.src"></view>
								</view>
								<view class="input-tools__item__bottom">
									{{ item.name }}
								</view>
							</u-upload>
						</view>
						<view v-else-if="item.type == 'File'"> 
							<lsj-upload ref="lsjUpload" childId="upload1" width="100%" height="100%" :option="option" :size="20"
								:instantly="false" @progress="onProgress" @change="onChange" @uploadEnd="uploadFilesEnd" :count="1">
								<view class="input-tools__item__top">
									<view class="iconfont tool-icon" :class="item.src"></view>
								</view>
								<view class="input-tools__item__bottom">
									{{ item.name }}
								</view>
							</lsj-upload>
						</view>
						<view v-else>
							<view class="input-tools__item__top">
								<view class="iconfont tool-icon" :class="item.src"> </view>
							</view>
							<view class="input-tools__item__bottom">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>

		<yinrh-menu-popup v-model="popupShow" :pop-data="menu" :x="x" :y="y" direction="column" theme="dark"
			:placement="place" @tapPopup="tapPopup" @delete="handleDelete" :width="popupWidth" :height="popupHeight + 'rpx'"
			:userId="userId" :returnData="longTapData" :deleteType="deleteType" />

		<!-- #ifdef H5 -->
		<recorder ref="recorderCom" @error="recorderError" @success="recorderSuccess" @start="recorderStart"></recorder>
		<!-- #endif -->
	</view>
</template>

<script>
	/**录音*/
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	import {
		weChatTimeFormat
	} from "@/utils/common";
	import {
		getGroupMemberInfo,
		getGroupInfo,
		getTargetUserInfo,
		getTimeDiff,
		getDefaultColor,
	} from "@/utils/index";
	import {
		getHistoryMessages,
		clearMessageUnreadStatus,
		getRongHistoryMessages,
	} from "@/utils/RongIM";
	import {
		queryOtherUserInfo
	} from "@/services/user";
	import yinrhMenuPopup from "@/uni_modules/yinrh-menu-popup/components/yinrh-menu-popup/yinrh-menu-popup.vue";
	import {
		mapState,
		mapMutations
	} from "vuex";
	import config from "@/config/app.config";
	import store from "@/store/index";
	import moment from "moment";
	import JVideo from "@/uni_modules/j-video/components/j-video/j-video.vue";
	import WorkTickets from './components/WorkTickets.vue'
	import {
		debounce
	} from "@/utils/util.js";
	import {
		queryMessageCollectAdd
	} from "@/services/chat";
	import atMixin from "@/utils/atMixin.js";
	import atPopup from "./atPopup.vue";
	import RecallMsgBox from "./components/RecallMsgBox";
	import preRenderShow from "./components/preRenderShow";
	import mixin from "./mixin";
	// 引入表情组件、
	import EmojiMenu from "./components/EmojiMenu";
	// 引入H5录音组件
	import recorder from "@/components/recorder.vue";
	// 引入多选框组件
	import MultipleSelection from "./components/MultipleSelection";
	import RecallBox from "./components/RecallBox";
	import {
		voiceCallRequest,
		videoCallRequest,
		downloadWebViewFlie
	} from '@/utils/olImInterface.js'
	// 引入图片预览组件
	import {
		PreviewImage
	} from '@/components/PreviewImage/index.js';

	import {
		customerComplaints
	} from '@/services/customer.js'

	export default {
		mixins: [mixin, atMixin],
		name: "PersonalChat",
		components: {
			JVideo,
			yinrhMenuPopup,
			atPopup,
			RecallMsgBox,
			EmojiMenu,
			recorder,
			MultipleSelection,
			RecallBox,
			preRenderShow,
			WorkTickets
		},
		data() {
			return {
				recallBoxShow: false, // 回复box显示与隐藏
				recallMsgInfo: {},
				keyHeight: "",
				duration: "",
				startTime: "",
				bofang: "",
				timer: "",
				recorderManagerOpen: false,
				weChatTimeFormat,
				fileList1: [],
				popupShow: false,
				x: 0,
				y: 0,
				place: "",
				popupWidth: "212rpx",
				popupHeight: 482,
				// 通话图标
				callIcon: {
					myCall: require("@/static/image/chart/call_my.png"),
					errorCall: require("@/static/image/chart/call_error.png"),
					successCall: require("@/static/image/chart/call_success.png"),
				},
				messageContent: "",
				groupId: "",
				chatList: [],
				targetUserInfo: {},
				scrollTop: 0,
				awaitSendFile: [],
				// 底部消息栏显示类型
				inputBottomType: "none",
				chatBoxStyle: {},
				groupMemberInfo: [],
				longTapData: {},
				scrollIntoView: "",
				formData: {
					sendUserId: "",
					sendName: "",
					sendTime: "",
					sendSite: "0",
					sendSiteId: 1,
					context: "",
					messageType: "",
					remark: "",
				},
				selectShow: false,
				isModule: false,
				backType: null,
				specialUserInfo: {},
				groupIsDelete: false,
				// 0 不设置 1 只为我删除 2 撤回
				deleteType: 0
			};
		},
		computed: {
			...mapState([
				"connectStatus",
				"userId",
				"userInfo",
				"groupChatInfo",
				"token",
				"friendsList",
				"typing",
			]),
			option() {
				return {
					// 上传服务器地址，此地址需要替换为你的接口地址
					url: config.server + "/app/oss/upload",
					// 上传附件的key
					name: "file",
					header: {
						Authorization: `Bearer ${this.token}`,
						version: config.version,
					},
				};
			},
			menu() {
				this.deleteType = 0
				if (this.longTapData && Object.keys(this.longTapData).length !== 0) {
					const arr = [];
					switch (this.longTapData.messageType) {
						case 'OL:Prerender':
							this.deleteType = 2
							break
							// eslint-disable-next-line no-fallthrough
						case "OL:Recall":
						case "RC:TxtMsg":
							arr.push({
								icon: "iconfont icon-fuzhi",
								title: this.$t("contacts.Copy"),
								type: "Copy",
							});
							// eslint-disable-next-line no-fallthrough
						case "RC:ImgMsg":
						case "RC:SightMsg":
						case "RC:HQVCMsg":
						case "RC:FileMsg":
							arr.unshift({
								icon: "iconfont icon-huifu",
								title: this.$t("contacts.Reply"),
								type: "Reply",
							});
							arr.push({
								icon: "iconfont icon-shoucang",
								title: this.$t("contacts.Collect"),
								type: "Collect",
							}, {
								icon: "iconfont icon-xuanze",
								title: this.$t("contacts.Select"),
								type: "Select",
							});
							// eslint-disable-next-line no-fallthrough
						case "OL:Card":
							arr.splice(2, 0, {
								icon: "iconfont icon-zhuanfa",
								title: this.$t("contacts.Forward"),
								type: "Forward",
							});
							// eslint-disable-next-line no-fallthrough
						case 'OL:WorkTickets':
						case "call":
						case "transfer":
							if (arr.length <= 1) {
								arr.push({
									icon: "iconfont icon-shanchu",
									title: this.$t("contacts.delete"),
									type: "Delete",
									color: "#FE6600",
								});
							} else {
								arr.splice(-1, 0, {
									icon: "iconfont icon-shanchu",
									title: this.$t("contacts.delete"),
									type: "Delete",
									color: "#FE6600",
								});
							}
					}
					// this.popupHeight = arr.length < 2 ? 160 : arr.length * 80;
					this.popupHeight = arr.length * 80;
					return arr;
				}
			},
			// 工具栏
			tools() {
				return [{
						name: this.$t("chat.Photo"),
						src: "icon-tupian",
						type: "Photo",
					},
					{
						name: this.$t("chat.Video"),
						src: "icon-bofang",
						type: "VideoFile",
					},
					// {
					//   name: this.$t("chat.call"),
					//   src: "icon-yuyintonghua",
					//   type: "Call",
					// },
					// {
					//   name: this.$t("chat.VideoCall"),
					//   src: "icon-shipintonghua",
					//   type: "Video",
					// },
					// {
					//   name: this.$t('chat.Location'),
					//   src: "icon-weizhi",
					//   type: "Location",
					// },
					// {
					//   name: this.$t('chat.Red-Packet'),
					//   src: "icon-hongbao",
					//   type: "RedPacket",
					// },
					// {
					//   name: this.$t("chat.Transfer"),
					//   src: "icon-zhuanzhang1",
					//   type: "Transfer",
					// },
					{
						name: this.$t("chat.File"),
						src: "icon-wenjian3",
						type: "File",
					},
					{
						name: this.$t("chat.Contact"),
						src: "icon-mingpian",
						type: "Contact",
					},
				];
			},
			currentUser() {
				console.log(
					this.groupMemberInfo.find((o) => o.userId == this.$store.state.userId)
				);
				return this.groupMemberInfo.find(
					(o) => o.userId == this.$store.state.userId
				);
			},
		},
		watch: {
			typing: {
				handler(newVal, oldVal) {
					if (this.isModule == "true") {
						if (newVal.length > 0) {
							this.REST_TYPING();
						}
					}
				},
				deep: true,
			},
			connectStatus(val) {
				if (val === 2) {
					this.getHistoryMessages();
				}
			},
			groupChatInfo: {
				handler(newVal, oldVal) {
					if (newVal[this.groupId]) {
						if (
							newVal[this.groupId][0].messageType !== "RC:RcCmd" &&
							newVal[this.groupId][0].messageType !== "OL:ReadStatus"
						) {
							this.scrollToBottom();
						}
						if (newVal[this.groupId][0].messageType === "RC:RcCmd") {
							this.chatList = this.chatList.filter(
								(t) => t.messageUId !== newVal[this.groupId][0].content.messageUId
							);
						} else {
							this.chatList = [...this.chatList, ...newVal[this.groupId]];
						}
						if (this.isModule == "true") {
							this.sendReadTimeMsg(
								this.chatList,
								this.$RongIMLib.ConversationType.GROUP,
								this.groupId
							);
						}
						newVal[this.groupId] = null;
					}
					console.log("新值");
				},
				deep: true,
			},
		},
		methods: {
			getGroupInfo,
			getTimeDiff,
			getDefaultColor,
			...mapMutations([
				"SET_SELECT_FRIEND_OPTION",
				"SET_SELECT_CHAT_OPTION",
				"REST_TYPING",
			]),
			// 提交工单
			async customerComplaintsSubmit(option) {
				console.log(option)
				uni.showLoading()
				const resp = await customerComplaints({
					refId: option.selectId,
					tableId: 'im_user',
					moduleType: option.moduleType,
					complaintFileJosn: '投诉文件不能为空',
					remark: option.reason
				})
				if (resp.result.code === 200) {
					this.handelSubmitCustomerMessage(option)
					uni.removeStorageSync('needSelectCustomer')
					console.log(resp.result.data)
				}
			},
			// 发送工单消息
			handelSubmitCustomerMessage(data) {
				const timestamp = new Date().getTime()
				// 定义消息投送目标会话
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId,
				}
				// 配置属性
				const options = {
					messageId: timestamp
				}

				const message = new this.$RongIMLib.WorkTicketsMessage({
					content: '',
					info: data
				})

				this.sendMessage(conversation, message, options)
			},
			toPeopleInformation(item) {
				if (this.isModule == "true") {
					let obj = getGroupInfo(this.groupId)
					uni.navigateTo({
						url: `/pages/chat/moduleSetting?groupId=${this.groupId}&commentName=${obj.groupName}&isGroupChat=1&moduleType=${obj.moduleType}`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/chat/ChatSettings?targetId=${
            item.userId
          }&commentName=${this.formatUserName(item)}`,
					});
				}
			},
			async toFindPosition(obj) {
				let index = this.avatorIsShow.findIndex(
					(o) => obj.messageUId == o.messageUId
				);
				if (index !== -1) {
					this.scrollIntoView = ''
					this.$nextTick(() => {
						this.scrollIntoView = `S-${this.avatorIsShow[index].messageUId}`;
					})
					uni.hideLoading();
				} else {
					uni.showLoading();
					await this.scrollToUpper();
					this.toFindPosition(obj);
				}
			},
			// 如果是交友的话则发送正在输入的状态
			sendTypingStatus() {
				if (this.isModule == "true") {
					this._sendTypingStatusMessage(3, this.groupId);
				}
			},
			// 多选转发
			selectToForward(arr) {
				this.SET_SELECT_CHAT_OPTION({
					info: arr,
					type: 3,
					isSingle: true,
					tipText: this.$t("share.selectChatTip"),
					title: this.$t("share.selectChat"),
				});
				uni.navigateTo({
					url: "/pages/selectFriend/selectChat",
				});
			},
			backChat() {
				console.log("getCurrentPages", getCurrentPages());
				if (this.backType || getCurrentPages().length < 2) {
					uni.switchTab({
						url: "/pages/chat/Chat",
					});
				} else {
					uni.navigateBack();
				}
			},
			toShowCardMsg(item) {
				if (this.selectShow) return;
        if(!item.groupId) {
          uni.navigateTo({
            url: `/pages/chat/ChatSettings?targetId=${
            item.userId
          }&commentName=${this.formatUserName(item)}`,
          });
        } else {
          uni.navigateTo({
            url: `/pages/chat/moduleSetting?groupId=${
            item.groupId
          }&commentName=${this.formatUserName(item)}&isGroupChat=1&moduleType=1`,
          });
        }
			},
			//预览
			showPreview(url) {
				if (this.selectShow) return;
				// uni.previewImage({
				// 	urls: [url],
				// });
				PreviewImage({
					urls: url,
				});
			},

			//新增收藏信息
			async handleAddCollect() {
				let sendName;
				if (
					Number(this.longTapData.senderUserId) === Number(this.userInfo.userId)
				) {
					sendName = this.formatUserName(this.userInfo);
				} else {
					sendName = this.longTapData.info.showUserName || this.formatUserName(this.longTapData.info);
				}
				const newContent = this.longTapData.expansion ? {
						...this.longTapData.content,
						mediaExpansion: this.longTapData.expansion && this.longTapData.expansion.content ?
							this.longTapData.expansion.content : null,
					} :
					this.longTapData.content;
				const params = {
					sendUserId: this.longTapData.senderUserId,
					sendName,
					sendTime: this.longTapData.sentTime,
					sendSite: this.longTapData.conversationType,
					sendSiteId: this.longTapData.messageUId,
					context: JSON.stringify(newContent),
					messageType: this.longTapData.messageType,
					targetId: this.longTapData.targetId,
					remark: "",
				};
				const resp = await queryMessageCollectAdd(params);
				if (resp.result.code != 200) return;
				uni.showToast({
					title: this.$t("chat.Collection-success"),
					icon: "none",
				});
			},
			// 滚动到顶部
			async scrollToUpper(e) {
				const messageUId = this.fillterMessages[0].messageUId;
				console.log("滚动到顶部", e);
				const chatList = await getRongHistoryMessages(
					this.groupId,
					3,
					this.chatList[0].sentTime
				);
				if (!chatList.length) return;
				this.chatList = chatList.concat([...this.chatList]);
				this.scrollIntoView = ''
				this.$nextTick(() => {
					this.scrollIntoView = `S-${messageUId}`;
				});
			},
			// 自动滚动到底部位置说
			scrollToBottom() {
				const arrLength = this.fillterMessages.length - 1;
				const lastMessId = this.fillterMessages[arrLength]?.messageUId;
				this.scrollIntoView = "";
				setTimeout(() => {
					this.scrollIntoView = `S-${lastMessId}`;
				}, 10);
			},
			//发送消息
			async sendMessage(conversation, message, options) {
				// 发送消息
				const res = await this.$RongIMLib.sendMessage(
					conversation,
					message,
					options
				);
				console.log(this.$RongIMLib.ErrorCode.SUCCESS);
				if (res.code === this.$RongIMLib.ErrorCode.SUCCESS) {
					console.log("消息发送成功", res.data);
					if (res.data.messageType == "RC:TxtMsg") {
						this.messageContent = "";
					} else if (res.data.messageType === "OL:Recall") {
						this.recallBoxShow = false;
						this.messageContent = "";
					}

					//清除@
					if (this.mentionedInfo.userIdList.length > 0) {
						this.mentionedInfo = {
							type: 2, //1: @ 所有人 2: @ 指定用户
							userIdList: [], //被 @ 的用户 Id 列表
							mentionedContent: this.$t("chat.At"), //携带扩展信息，例如 `有人@你`}
						};
						this.actionAtUser = [];
					}
					this.chatList.push(res.data);
					this.$nextTick(() => {
						this.scrollToBottom();
					});
					this.$store.dispatch("upChatList", res.data);
					if (res.data.messageType === "OL:Prerender") {
						this.longTapData = res.data
						return res.data
					}
				} else {
					this.sendMsgError(res.code, res.msg)
					console.log("消息发送失败", res, res.code, res.msg);
				}
			},
			// 长按录音按钮回调，显示加载框，并不代表马上计时
			startRecord() {
				uni.showLoading()
				// #ifdef H5
				this.$refs.recorderCom.start();
				// #endif

				// #ifdef APP-PLUS
				recorderManager.start();
				// #endif
			},
			/**
			 * 开始录音，初始化计时器
			 */
			recorderStart() {
				uni.hideLoading()
				this.duration = 0;
				this.recorderManagerOpen = true;
				this.startTime = moment(); 
				console.log(this.startTime, "开始录音");
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = undefined;
				}
				this.timer = setInterval(() => {
					this.duration = moment().diff(this.startTime, "seconds");
				}, 100);
				console.log(this.timer, "录音时长");
			},
			//结束录音
			overRecord() {
				this.recorderManagerOpen = false;
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = undefined;
				}
				const sec = moment().diff(this.startTime, "seconds");
				if (sec < 1) {
					uni.showToast({
						title: this.$t("chat.Record-tips"),
						icon: "error",
					});
					return;
				}
				// if (this.$store.state.isWebview) {
				//   recorderManager.stop({
				//     format: "mp3",
				//   });
				//   return
				// }

				// #ifdef H5
				this.$refs.recorderCom.stop();
				// #endif

				// #ifdef APP-PLUS
				recorderManager.stop({
				  format: "mp3",
				});
				// #endif
			},
			//获取上传图片信息
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				const type = 0;
				for (let i = 0; i < lists.length; i++) {
					await this.uploadFilePromise(type, lists[i].url, "");
				}
			},
			//上传图片
			async uploadFilePromise(type, url, tempFiles, sec) {
        uni.showLoading({
          mask: true,
        })
				// let recallObj = {}
				if (!type || type == 1) {
					const objContent = {
						type: !type ? 'img' : 'video',
						name: '',
						size: '',
						fileType: ''
					}
					// recallObj = await this.setPreRenderMsg(objContent, this.$RongIMLib.ConversationType.GROUP, this.groupId, '')
				}
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.server + "/app/oss/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						header: {
							Authorization: `Bearer ${store.state.token}`,
							version: config.version,
						},
						formData: {
							user: "test",
						},
						success: (res) => {
							if (!type || type == 1) {
								// this.handleRecallPrerenderMessage(recallObj)
								setTimeout(() => {
									if (!type) {
										this.handleSendImage(resp.data.compressImage, resp.data.url);
									} else if (type == 1) {
										this.handleSendVideo(
											resp.data.oneUrl,
											resp.data.url,
											resp.data.fileName
										);
									}
                  uni.hideLoading()
								}, 300)
							}
							const resp = JSON.parse(res.data);
							console.log("回调", resp.data);
							setTimeout(() => {
								if (!type) {
									// this.handleRecallMessage()
									// this.handleSendImage(resp.data.compressImage, resp.data.url);
								} else if (type == 1) {
									// this.handleSendVideo(
									//   resp.data.oneUrl,
									//   resp.data.url,
									//   resp.data.fileName
									// );
								} else if (type == 2) {
									this.handleSendRemote(resp.data.url, sec);
								}
                uni.hideLoading()
							}, 1000);
						},
						fail: (e) => {
              uni.hideLoading()
							console.log("失败的回调", e);
						},
					});
				});
			},
			// 发送图片消息
			async handleSendImage(content, imageUri) {
				if (!content) {
					return uni.showToast({
						title: this.$t("chat.Empty-messages-cannot-be-sent"),
						icon: "none",
					});
				}
				// 定义消息投送目标会话
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId,
				};
				const message = new this.$RongIMLib.ImageMessage({
					content: content, // 图片缩略图，应为 Base64 字符串，且不可超过 80KB
					imageUri: imageUri, // 图片的远程访问地址
				});
				// 配置属性
				const options = {
					messageId: 0,
				};
				this.sendMessage(conversation, message, options);
			},
			// 发送语音消息
			async handleSendRemote(remoteUrl, sec) {
				if (!remoteUrl) {
					return uni.showToast({
						title: this.$t("chat.Empty-messages-cannot-be-sent"),
						icon: "none",
					});
				}
				// 定义消息投送目标会话
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId,
				};
				const message = new this.$RongIMLib.HQVoiceMessage({
					remoteUrl: remoteUrl, // 图片的远程访问地址
					duration: sec || moment().diff(this.startTime, "seconds"), //时长
				});
				// 配置属性
				const options = {
					messageId: 0,
				};
				console.log(conversation, message, options, "fasms");
				this.sendMessage(conversation, message, options);
			},
			// 长按消息显示操作弹窗
			longTap(index, isMySend, item) {
				if (!this.ifLongtap) return
				if (this.selectShow) return;
				//普通成员
				// if (this.currentUser && this.currentUser.userRole == 3 && !isMySend) {
				//   return false;
				// }
				if (item.messageType == "RC:RcCmd" || item.messageType == "OL:VoiceMsg") {
					return false;
				}
				let dom = uni.createSelectorQuery().in(this);
				// popup-menu 为上面添加的 id 值
				dom.select(`#index${index}`).boundingClientRect();
				dom.exec((data) => {
					// 配置 place、value、x、y 的值
					let isTop = data[0].top >= uni.upx2px(this.popupHeight),
						place = isTop ? "bottom" : "top";
					if (isMySend) {
						this.place = place + "-end";
					} else {
						this.place = place + "-start";
					}

					this.popupShow = !this.popupShow;
					this.x = data[0]["width"] / 2;
					let top = data[0].top + data[0].height / 2;
					let bottom = data[0].bottom - data[0].height / 2;
					this.y = isTop ? top : bottom;
					// this.y = data[0][isTop ? "top" : "bottom"];
				});
				this.longTapData = item;
			},
			// 删除
			handleDelete(e) {
				if (e == 1) {
					this.handleRecallMessage();
				} else if (e == 2) {
					this.handleDeleteMessage();
				}
			},
			// 点击长按操作框回调
			tapPopup(e, item) {
				switch (e.type) {
					// 收藏
					case "Collect":
						this.handleAddCollect();
						break;
						// 回复
					case "Reply":
						let info;
						// 判断是否回复自己的信息
						if (item.senderUserId === this.userId) {
							console.log("回复自己的信息", this.getGroupInfo(this.groupId));
							info = {
								...this.userInfo
							};
							if (this.isModule == 'true') {
								const group = this.getGroupInfo(this.groupId)
								if (group.moduleType == 2) {
									info.commentLast = group.groupName || this.userInfo.userName
								} else {
									info.commentLast = group.myName || this.userInfo.userName
								}
								info.commentName = ''
							}

						} else {
							console.log("回复对方的信息", this.longTapData.info);
							info = {
								...this.longTapData.info
							};
							if (this.isModule == 'true') {
								info.commentLast = this.getGroupInfo(this.groupId).groupName || 'OMLOOKER'
								info.commentName = ''
							}
						}
						this.recallMsgInfo = {
							...this.longTapData,
							info,
						};
						this.recallBoxShow = true; // 底部回复容器展示
						break;
						// 复制
					case "Copy":
						this.onCopyMsg(item);
						break;
						// 多选
					case "Select":
						this.selectMsgItem = [];
						this.selectMsgHandle(item);
						this.selectShow = true;
						this.stopPlayVoice();
						break;
						// 转发
					case "Forward":
						this.SET_SELECT_CHAT_OPTION({
							info: this.longTapData,
							type: 2,
							isSingle: true,
							tipText: this.$t("share.selectChatTip"),
							title: this.$t("share.selectChat"),
						});
						uni.navigateTo({
							url: "/pages/selectFriend/selectChat",
						});
						break;
					default:
						break;
				}

				console.log("点击右键菜单", e, item);
			},
			// changeBottomType(type) {

			// 	if (this.inputBottomType == type) {
			// 		this.inputBottomType = "none";
			// 		this.chatBoxStyle = {};
			// 	} else {
			// 		this.inputBottomType = type;
			// 		this.chatBoxStyle = {
			// 			height: "calc(100vh - 540rpx)",
			// 		};
			// 	}
			// },
			async getTargetUserInfo(id) {
				const resp = await queryOtherUserInfo(id);
				console.log(resp);
				if (!resp.success) return;
				this.targetUserInfo = resp.result.data;
				console.log(this.targetUserInfo, "xunxue");
			},
			// 点击撤回信息
			handleRecallMessage() {
				const that = this;
				const extra = {
					latestMessage: {},
				};
				const filterMsg = that.avatorIsShow.filter(
					(item) =>
					item.messageUId !== this.longTapData.messageUId &&
					item.messageType != "OL:ReadStatus" &&
					item.messageType != "RC:RcCmd"
				);
				if (filterMsg.length > 0) {
					extra.latestMessage = filterMsg[filterMsg.length - 1];
				}
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId, // 群聊
				};
				this.$RongIMLib
					.recallMessage(conversation, {
						messageUId: this.longTapData.messageUId,
						sentTime: this.longTapData.sentTime,
						extra,
					})
					.then((res) => {
						if (res.code === 0) {
							console.log(res.code, res.data, that.longTapData, "longTapData");
							that.getTargetUserInfo(that.longTapData.senderUserId);
							const index = that.chatList.findIndex(
								(item) => item.messageUId === that.longTapData.messageUId
							);
							that.$set(that.chatList, index, res.data);
							console.log("chatList", that.chatList);
						} else {
							console.log(res.code, res.msg);
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			// 点击撤回信息
			handleRecallPrerenderMessage(newObj) {
				const that = this;
				const extra = {
					latestMessage: {},
				};
				const filterMsg = that.avatorIsShow.filter(
					(item) =>
					item.messageUId !== newObj.messageUId &&
					item.messageType != "OL:ReadStatus" &&
					item.messageType != "RC:RcCmd"
				);
				if (filterMsg.length > 0) {
					extra.latestMessage = filterMsg[filterMsg.length - 1];
				}
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId, // 群聊
				};
				return this.$RongIMLib
					.recallMessage(conversation, {
						messageUId: newObj.messageUId,
						sentTime: newObj.sentTime,
						extra,
					})
					.then((res) => {
						if (res.code === 0) {
							console.log(res.code, res.data, newObj, "longTapData");
							that.getTargetUserInfo(newObj.senderUserId);
							const index = that.chatList.findIndex(
								(item) => item.messageUId === newObj.messageUId
							);
							that.$set(that.chatList, index, res.data);
							console.log("chatList", that.chatList);
						} else {
							console.log(res.code, res.msg);
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			// 点击删除信息
			handleDeleteMessage() {
				const that = this;
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId,
				};
				this.$RongIMLib
					.deleteMessages(conversation, [{
						messageUId: this.longTapData.messageUId,
						sentTime: this.longTapData.sentTime,
						messageDirection: this.$RongIMLib.MessageDirection.SEND,
					}, ])
					.then((res) => {
						if (res.code === 0) {
							const index = that.chatList.findIndex(
								(item) => item.messageUId === that.longTapData.messageUId
							);
							that.chatList.splice(index, 1);
							console.log("chatList", that.chatList);
						} else {
							console.log(res.code, res.msg);
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			// 多选删除功能
			onMultipleDelete() {
				const options = [];
				this.selectMsgItem.forEach((item) => {
					options.push({
						messageUId: item.messageUId,
						sentTime: item.sentTime,
						messageDirection: item.messageDirection,
					});
				});

				const that = this;
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId,
				};
				this.$RongIMLib
					.deleteMessages(conversation, options)
					.then((res) => {
						if (res.code === 0) {
							that.chatList = that.chatList.filter(
								(item) => this.selectMsgIds.indexOf(item.messageUId) === -1
							);
							this.selectShow = false;
							this.selectMsgItem = [];
						} else {
							console.log(res.code, res.msg);
						}
					})
					.catch((error) => {
						console.log(error);
					});
			},
			// 多选转发功能
			onMultipleForward() {
				this.selectMsgItem.sort((a, b) => {
					return a.sentTime - b.sentTime;
				});
				console.log(this.selectMsgItem, "this.selectMsgItem,");
				this.SET_SELECT_CHAT_OPTION({
					info: this.selectMsgItem,
					type: 3,
					isSingle: true,
					tipText: this.$t("share.selectChatTip"),
					title: this.$t("share.selectChat"),
				});
				uni.navigateTo({
					url: "/pages/selectFriend/selectChat",
				});
			},
			// 点击工具栏回调
			clickToolHandle(item) {
				console.log(item);
				switch (item.type) {
					case "Video":
						videoCallRequest(this.targetId)
						break;
					case "Contact":
						this.SET_SELECT_FRIEND_OPTION({
							// 用户列表
							UserList: this.friendsList,
							// 默认选中用户id列表，即不可取消的用户id
							defaultIdList: [],
							type: 4,
							tipText: this.$t("share.contactsTip"),
							title: this.$t("share.selectMyContacts"),
							isSingle: true,
							otherParams: {
								conversationType: this.$RongIMLib.ConversationType.GROUP,
								targetId: this.groupId,
							},
						});
						uni.navigateTo({
							url: "/pages/selectFriend/selectFriend",
						});
						break;
					case "Call":
						voiceCallRequest(this.targetId)
						break;
					case "VideoFile":
						this.handleUploadVideo();
						break
					default:
						break;
				}
			},
			// app选择文件回调
			onChange: debounce(function(files) {
				const newFiles = [...files.values()];
				console.log("比较", this.awaitSendFile.length, newFiles.length);
				if (this.awaitSendFile.length < newFiles.length) {
					console.log("app选择文件的回调", newFiles);
					const objContent = {
						type: 'file',
						name: newFiles[0].name,
						size: newFiles[0].size,
						fileType: ''
					}
					this.setPreRenderMsg(objContent, this.$RongIMLib.ConversationType.GROUP, this.groupId, '')
					this.awaitSendFile = newFiles;
					this.$refs.lsjUpload[0].upload(newFiles[newFiles.length - 1].name);
				}
			}, 300),
			// 文件上传中的回调
			onProgress(res) {
				console.log("文件上传中", res);
			},

			// 文件上传成功后的回调
			async uploadFilesEnd(res) {
				await this.handleRecallMessage()
				setTimeout(() => {
					console.log("这是文件上传成功后的回调", res);
					this.$refs.lsjUpload[0].clear(res.name);
					let index = -1;
					const fileNow = this.awaitSendFile.find((t, i) => {
						index = i;
						return t.name == res.name;
					});
					if ((index = -1)) {
						this.awaitSendFile = [];
					} else {
						this.awaitSendFile.splice(index, 1);
					}
					const resData = JSON.parse(res.responseText).data;
					console.log("文件", resData);
					this.handleSendFiles(resData.fileName, resData.url, res.file);
				}, 300)
			},

			handleAddEmoji(emoji) {
				this.messageContent = `${this.messageContent}${emoji}`;
			},
			// 获取会话历史
			async getHistoryMessages() {
        console.log('开始获取历史消息', '******************')
				this.chatList = await getHistoryMessages(this.groupId, 3);
        console.log('获取历史消息成功！', this.chatList)
				if (this.isModule == "true") {
					this.sendReadTimeMsg(
						this.chatList,
						this.$RongIMLib.ConversationType.GROUP,
						this.groupId
					);
				}

				this.$nextTick(() => {
					this.scrollToBottom();
				});
				console.log("chatList", this.chatList);
			},
			// 发送消息
			async handleSendMessage() {
				// 发送消息后, 关闭@弹窗
				this.$refs.at.close();

				if (this.inputBottomType == "emoji") {
					this.isInputFocus = false
				}
				if (!this.messageContent) {
					return uni.showToast({
						title: this.$t("chat.Empty-messages-cannot-be-sent"),
						icon: "none",
					});
				}
				const newMessageContent = this.getLinkTextToHtml(this.messageContent);
				this.messageContent = ""
				// 定义消息投送目标会话
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId,
				};

				// 实例化待发送消息，RongIMLib.TextMessage 为内置文本型消息
				var message;
				if (
					this.mentionedInfo.userIdList &&
					this.mentionedInfo.userIdList.length > 0
				) {
					if (this.recallBoxShow) {
						console.log('发送回复的消息', this.recallMsgInfo);
						// 实例化待发送消息，RongIMLib.TextMessage 为内置文本型消息
						message = new this.$RongIMLib.RecallMessage({
							content: newMessageContent,
							recallMsg: this.recallMsgInfo,
							mentionedInfo: this.mentionedInfo, //@消息
						});
					} else {
						message = new this.$RongIMLib.TextMessage({
							content: newMessageContent,
							mentionedInfo: this.mentionedInfo, //@消息
						});
					}
				} else {
					if (this.recallBoxShow) {
						// 实例化待发送消息，RongIMLib.TextMessage 为内置文本型消息
						message = new this.$RongIMLib.RecallMessage({
							content: newMessageContent,
							recallMsg: this.recallMsgInfo,
						});
					} else {
						message = new this.$RongIMLib.TextMessage({
							content: newMessageContent,
						});
					}
				}
				// 配置属性
				const options = {
					// 重发消息的 messageId, 可以从 onSendBefore 回调返回的 message 对象中 或 返回结果中获取
					// messageId: 0,
					//是否@
					isMentioned: this.mentionedInfo.userIdList &&
						this.mentionedInfo.userIdList.length > 0 ?
						true : false,
				};
				this.sendMessage(conversation, message, options);
			},
			//跳转详情页
			handleDetail() {
				if (this.isModule == "true") {
					let obj = getGroupInfo(this.groupId)
					uni.navigateTo({
						url: `/pages/chat/moduleSetting?groupId=${this.groupId}&commentName=${obj.groupName}&isGroupChat=1&moduleType=${obj.moduleType}`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/chat/ChatSettings?groupId=${this.groupId}&isGroupChat=1`,
					});
				}
			},
			// 返回通话状态显示的文字
			getCalledContent(val, duration) {
				let str = "";
				switch (val) {
					case 0:
						str = "No answer,click to call back";
						break;
					case 1:
						str = "Call time " + duration;
						break;
					case 2:
						str = "Canceled, click to call back";
						break;
					case 3:
						str = "The other party has declined";
						break;
					default:
						str = "Call time " + duration;
						break;
				}
				return str;
			},
			// // 识别文件类型
			// identifyFileType(data) {
			//   let fileType = "";
			//   let suffix = data.toLocaleLowerCase();
			//   if ("bmp,jpg,jpeg,png,gif,".indexOf(suffix) > -1) {
			//     fileType = "image";
			//   } else if ("xls,xlsx".indexOf(suffix) > -1) {
			//     fileType = "excel";
			//   } else if ("doc,docx".indexOf(suffix) > -1) {
			//     fileType = "word";
			//   } else if ("ppt,pptx".indexOf(suffix) > -1) {
			//     fileTypee = "ppt";
			//   } else if ("pdf".indexOf(suffix) > -1) {
			//     fileType = "pdf";
			//   } else if (".mp3".indexOf(suffix) > -1) {
			//     fileType = "mp3";
			//   } else if (".txt".indexOf(suffix) > -1) {
			//     fileType = "txt";
			//   } else if (".zip".indexOf(suffix) > -1) {
			//     fileType = "zip";
			//   } else if (".mp4".indexOf(suffix) > -1) {
			//     fileType = "mp4";
			//   }
			//   return fileType;
			// },
			/**换算文件大小*/
			getSize(size) {
				if (!size) return "0K";
				var num = 1024.0; //byte
				if (size < num) return size + "B";
				if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "K"; //kb
				if (size < Math.pow(num, 3))
					return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
				if (size < Math.pow(num, 4))
					return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
				return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
			},
			async init() {
				this.groupMemberInfo = await getGroupMemberInfo(this.groupId);
				console.log("groupMemberInfo", this.groupMemberInfo, this.isModule);
				if (this.groupMemberInfo && this.groupMemberInfo.length > 0) {
					this.groupIsDelete = false
				} else {
					this.groupIsDelete = true
				}
				if (this.isModule == "true") {
					this.getSpecialUserInfo();
					if (uni.getStorageSync('needSelectCustomer') && uni.getStorageSync('needSelectCustomer') !==
						'undefined') {
						this.customerComplaintsSubmit(JSON.parse(uni.getStorageSync('needSelectCustomer')))
					}
				}
				await this.getHistoryMessages();
				// clearMessageUnreadStatus(this.groupId, 3);
			},
			//播放语音
			// playVoice(url, duration, id) {
   //      console.log(url, duration, id);
			// 	if (this.selectShow) return
			// 	console.log("播放语音", duration);
			// 	if (this.audio) {
			// 		this.audio.destroy();
			// 	}
			// 	this.bofang = id;
			// 	this.audio = uni.createInnerAudioContext();
			// 	this.audio.autoplay = true;
			// 	this.audio.src = url; //音频地址
			// 	this.audio.play(); //执行播放
			// 	this.audio.onPause(() => {
			// 		this.audio.destroy();
			// 		this.audio = undefined;
			// 		this.bofang = "";
			// 	});
			// },
			//监听语音结束
			handleVioceOver() {
        // 监听开始录音
        recorderManager.onStart(() => {
          this.recorderStart()
        })
				/**监听语音结束*/
				recorderManager.onStop(async (res) => {
					const sec = moment().diff(this.startTime, "seconds");
					console.log("语音结束", sec);
					if (+sec < 1) {
						return uni.showToast({
							title: this.$t("chat.Record-tips"),
							icon: "error",
						});
					}
					console.log("监听语音结束", sec, '秒');
					this.voicePath = res.tempFilePath;
					const type = 2;
					await this.uploadFilePromise(type, res.tempFilePath, "", sec);
				});
			},
			//暂停播放
			playStop() {
				innerAudioContext.pause();
				this.bofang = "";
			},
			//上传视频
			async handleUploadVideo() {
				console.log("上传视频");
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					sourceType: ["camera", "album"],
					success: async (res) => {
						console.log(res.tempFilePath);
						const type = 1;
						await this.uploadFilePromise(type, res.tempFilePath, "");
					},
				});
			},
			//上传文件
			handleUploadFile() {
				uni.chooseFile({
					count: 1,
					success: async (res) => {
						console.log(res.tempFilePaths[0], "文件信息");
						const type = 4;
						await this.uploadFilePromise(
							type,
							res.tempFilePaths[0],
							res.tempFiles[0]
						);
					},
				});
			},
			// 发送视频消息
			async handleSendVideo(content, imageUri, fileName) {
				if (!content) {
					return uni.showToast({
						title: this.$t("chat.Empty-messages-cannot-be-sent"),
						icon: "none",
					});
				}
				// 定义消息投送目标会话
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId,
				};
				const message = new this.$RongIMLib.SightMessage({
					sightUrl: imageUri, //"<视频资源的远程地址>",
					content: content, //"<缩略图base64>",
					duration: 10,
					size: 100,
					name: fileName,
				});
				// 配置属性
				const options = {
					messageId: 0,
				};
				this.sendMessage(conversation, message, options);
			},
			// 发送文件消息
			async handleSendFiles(fileName, imageUri, tempFiles) {
				if (!imageUri) {
					return uni.showToast({
						title: this.$t("chat.Empty-messages-cannot-be-sent"),
						icon: "none",
					});
				}
				// 定义消息投送目标会话
				const conversation = {
					conversationType: this.$RongIMLib.ConversationType.GROUP,
					targetId: this.groupId,
				};
				const message = new this.$RongIMLib.FileMessage({
					name: fileName,
					size: tempFiles.size,
					type: tempFiles.type,
					fileUrl: imageUri,
				});
				// 配置属性
				const options = {
					messageId: 0,
				};
				this.sendMessage(conversation, message, options);
			},
			//查看文件
			handleSeeFiles(item) {
				if (this.selectShow) return;
				console.log("查看文件");
				if (this.$store.state.isWebview) {
					downloadWebViewFlie(item.content.fileUrl, item.content.name)
					return
				}
				uni.openDocument({
					filePath: item.content.fileUrl,
					success: (res) => {
						console.log("成功打开");
					},
					fail: (fail) => {
						uni.showToast({
							title: this.$t("chat.File-tips"),
							duration: 2000,
							icon: "none",
						});
						console.log("打开失败");
					},
				});
			},
			// 特殊聊（只有两人）
			async getSpecialUserInfo() {
				// const groupInfo = await getGroupMemberInfo(this.groupId);
				this.$nextTick(async () => {
					let index = this.groupMemberInfo.findIndex(
						(val) => val.userVo.userId != this.userInfo.userId
					);
					if (index !== -1) {
						this.specialUserInfo = await this.getFriendInfo(
							this.groupMemberInfo[index].userVo.userId
						);
						console.log(this.specialUserInfo, "this.specialUserInfo");
					}
				});
			},
			async getFriendInfo(userId) {
				const res = await getTargetUserInfo(userId);
				return res;
			},
		},
		onShow() {
			// if (this.connectStatus !== 2) return;
			this.init();
			// this.isSystemInfo()
		},
		onLoad(option) {
			this.REST_TYPING();
			setTimeout(() => {
				this.WindowInfo = uni.getWindowInfo();
			}, 100);
			console.log(option.groupId);
			this.groupId = option.groupId;
			this.isModule = option.isModule;
			this.backType = Number(option.backType || 0);
			this.handleVioceOver();
			uni.onKeyboardHeightChange((res) => {
				// 监听软键盘的高度，页面隐藏后一定要取消监听键盘
				this.keyHeight = res.height;
				this.inputBottomType = "none";
				this.chatBoxStyle = {
					paddingBottom: this.keyHeight + "px",
				};
			});
		},
		onUnload() {
			this.stopPlayVoice();
			uni.offKeyboardHeightChange((res) => {});
			clearMessageUnreadStatus(this.groupId, 3);
			if (this.audio) {
				this.audio.destroy();
				this.bofang = "";
			}

			const previewImageDom = document.getElementById('PreviewImage-mask')
			if (previewImageDom) {
				previewImageDom.remove();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.customer {
		display: inline-block;
		font-size: 24rpx;
		line-height: 24rpx;
		font-family: Source Han Sans CN;
		color: #ffffff;
		background: #61bdb2;
		font-weight: 500;
		border: 2rpx solid #61bdb2;
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
		margin-bottom: 2px;
	}

	::v-deep .a-link {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1765da;
		text-decoration: none;
	}

	.video-bg {
		width: 100%;
		height: fit-content;
		background: #191a19;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.omit {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		white-space: pre-wrap;
		word-break: break-word;
		font-size: 24rpx;
	}

	.time-msg {
		font-size: 20rpx !important;
		font-weight: 400 !important;
		margin-top: 2rpx;
		display: flex;
		align-items: center;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;

		.right-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 4rpx;
		}
	}

	.time-voice {
		margin-left: 20rpx;
		color: rgba(135, 135, 135, 0.6);
	}

	.time-pic {
		height: 30rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 36rpx;
		line-height: 30rpx;
		padding: 0rpx 10rpx;
		color: #FFFFFF;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}

	.time-file {
		display: block;
		color: rgba(135, 135, 135, 0.6);
		float: right;
		line-height: 28rpx;
		padding: 10rpx 0;
		padding-left: 20rpx;
	}

	.time-recall {
		display: block;
		float: right;
		color: rgba(135, 135, 135, 0.6);
	}

	.time-text-file {
		color: rgba(135, 135, 135, 0.6);
		padding: 10rpx 0rpx;
		padding-right: 20rpx;
		justify-content: flex-end;
	}

	.time-text-file_2 {
		color: rgba(135, 135, 135, 0.6);
		text-align: right;
		line-height: 28rpx;
		padding: 10rpx 0rpx;
		justify-content: flex-end;
	}

	.time-card {
		display: inline-block;
		float: right;
		color: rgba(135, 135, 135, 0.6);
	}

	.wrapper {
		box-sizing: border-box;
		width: 100%;
		height: calc(100vh - var(--status-bar-height));
		background: #e9edec;
		display: flex;
		flex-direction: column;

		.header-box {
			.u-center-slot {
				width: 80%;
				margin: 0rpx 10%;

				.nav-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
					text-align: center;
				}

				.nav-status {
					margin-top: 6upx;
					margin-left: 12upx;
					font-size: 24upx;
					font-weight: 400;
					color: #1bc922;
					position: relative;
					text-align: center;
					// line-height: 1em;

					&::before {
						content: "";
						position: absolute;
						width: 8upx;
						height: 8upx;
						background: #1bc922;
						border-radius: 50%;
						top: 50%;
						transform: translateY(-50%);
						margin-left: -12upx;
					}
				}

				.nav-members {
					// font-size: 12rpx;
					// font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					color: #878787;
					font-size: 24upx;
					font-weight: 400;
					margin-top: 6upx;
					text-align: center;
				}
			}
		}

		.chat-box {
			width: 100%;
			flex: 1;
			overflow: scroll;
			background: #e9edec;
			box-sizing: border-box;
			padding: 0rpx 30rpx 0;
			// padding-top: calc(var(--status-bar-height) + 120rpx);

			.char-time {
				font-size: 24rpx;
				font-family: Inter-Regular, Inter;
				font-weight: 400;
				color: #606665;
				// -webkit-background-clip: text;
				text-align: center;
				margin-top: 30upx;
			}

			.char-hour {
				font-size: 24rpx;
				font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
				font-weight: 400;
				color: rgba(135, 135, 135, 0.3);
				line-height: 36rpx;
				margin: 10rpx 104rpx 0;


			}

			.read-icon,
			.icon-yifasong {
				font-size: 24rpx;
				font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
				font-weight: 400;
				margin-left: 12rpx;
			}

			.char-hour-right {
				text-align: right;
			}

			.char-hour-success {
				color: #61bdb2;
			}

			.char-hour-error {
				color: #fe6600;
			}

			.send-success-state {
				display: inline-block;
				margin-left: 4rpx;
			}

			.send-error-state {
				flex-flow: row-reverse;
			}

			.chat-line {
				width: 100%;
				display: flex;
				padding-bottom: 30upx;

				.my-select-icon {
					display: inline-block;
					display: flex;
					margin-right: 30rpx;
					align-items: center;
					align-items: end;
					margin-bottom: 18rpx;

					.unselect-icon {
						display: inline-block;
						width: 44rpx;
						height: 44rpx;
						border: 2rpx solid rgba(0, 0, 0, 0.2);
						box-sizing: border-box;
						background: #ffffff;
						border-radius: 50%;
						cursor: pointer;
					}

					.select-icon {
						font-size: 44rpx;
						color: #61bdb2;
						vertical-align: top;
					}
				}

				&__container {
					&__name {
						margin: 0 0 10rpx 24rpx;
						font-size: 12rpx;
						color: #878787;
						display: flex;
						align-items: center;
					}
				}

				&.chat-right {
					justify-content: flex-end;

					.time-msg {
						display: block;
						color: rgba(255, 255, 255, 0.8);

						.right-icon {
							width: 24rpx;
							height: 24rpx;
							margin-left: 4rpx;
						}
					}

					.time-voice {
						font-size: 20rpx;
						margin-left: 20rpx;
						line-height: 28rpx;
						margin-top: 10rpx;
					}

					.time-pic {
						height: 40rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 40rpx;
						line-height: 40rpx;
						padding: 0rpx 10rpx;
						color: #FFFFFF;
						position: absolute;
						right: 20rpx;
						bottom: 20rpx;
						font-size: 20rpx;
					}

					.time-file {
						display: block;
						float: right;
						line-height: 28rpx;
						padding-top: 8rpx;
						padding-left: 20rpx;
					}

					.time-recall {
						display: block;
						float: right;
					}

					.time-text-file {
						padding: 0;
						padding-bottom: 10rpx;
						padding-right: 20rpx;
						text-align: right;
					}

					.time-text-file_2 {
						text-align: right;
						line-height: 28rpx;
						padding: 0;
					}

					.time-card {
						display: inline-block;
						float: right;
					}

					.my-select-icon {
						margin-right: auto;
					}
				}

				.avatar {
					flex-shrink: 0;
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}

				.connect-block-left {
					background: #ffffff;
					border-radius: 0px 20rpx 20rpx 20rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					box-sizing: border-box;
					padding: 20upx 30upx;
					margin: 0 104upx 0 24upx;
					font-size: 28upx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44upx;
					word-wrap: break-word;
					white-space: pre-wrap;
					word-break: break-word;
					width: fit-content;
					overflow: hidden;
				}

				.connect-block-right {
					border-radius: 20rpx 0px 20rpx 20rpx;
					background: #61bdb2;
					box-sizing: border-box;
					padding: 20upx 30upx;
					margin: 0 24upx 0 104upx;
					font-size: 28upx;
					font-weight: 400;
					color: #ffffff;
					line-height: 44upx;
					word-break: break-word; // 强制换行
					overflow: hidden;
				}

				.char-pic {
					width: 300rpx;
					height: 300rpx;
					border-radius: 20rpx 0px 20rpx 20rpx;
					opacity: 1;
					border: 2rpx solid #ffffff;
					margin: 0 24rpx;
					position: relative;
				}

				.char-pic-left {
					border-radius: 0px 20rpx 20rpx 20rpx;
				}

				.chart-call {
					display: flex;
					align-items: center;
					white-space: nowrap;
					padding: 20rpx;

					.call-my-icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 8rpx;
					}
				}

				.chart-voice {
					position: relative;
					display: flex;
					align-items: center;
					white-space: nowrap;
					padding: 20rpx;
					line-height: 48upx;

					.progress-background {
						position: absolute;
						top: 0;
						left: 0;
						width: 40%;
						height: 100%;
						border-radius: 20rpx 0px 0px 20rpx;
						background-color: #e6f5f3;
						transition: width linear 0.3s;
					}

					.video-back-box {
						display: inherit;
						background-color: #fff;
						z-index: 10;
						border-radius: 50%;
						box-shadow: 0px 0px 16rpx 0px rgba(75, 145, 250, 0.3);
					}

					.voice-icon {
						z-index: 10;
						font-size: 48rpx;
					}

					.voice-icon-shadow {
						box-shadow: 0px 0px 16px 0px rgba(62, 165, 152, 0.5);
					}

					.progress-icon {
						z-index: 10;
						font-size: 32rpx;
						margin: 0 20rpx;
					}

					text {
						z-index: 10;
						font-size: 28rpx;
						font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
						font-weight: 400;
						line-height: 40rpx;
					}
				}

				.chart-voice-left {
					background-color: #ffffff;
					color: #4b91fa;

					.progress-background {
						background-color: #edf4ff;
						border-radius: 0rpx 0px 0px 20rpx;
					}
				}

				.video-duration_top {
					position: absolute;
					left: 20rpx;
					top: 20rpx;
					font-size: 20rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #ffffff;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 36rpx;
					padding: 8rpx 12rpx;

					.video-icon {
						width: 16rpx;
						height: 18rpx;
						margin-left: 8rpx;
						color: #FFFFFF;
					}
				}

				.file-left {
					color: #4b91fa;
				}

				.file-type-cicle {
					position: relative;
					display: flex;

					.file-type-image {
						width: 116rpx;
						height: 116rpx;
					}

					.file-type-keyword {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						font-weight: 700;
					}
				}

				.chart-file-container {
					max-width: 254rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					line-height: 40rpx;
					margin-left: 20rpx;
				}

				.file-content {
					word-break: break-word;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					white-space: break-spaces;
				}

				.file-size {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.3);
					line-height: 36rpx;
				}

				.file-size-left {
					color: rgba(135, 135, 135, 0.3);
				}

				.chart-transfer {
					width: 430rpx;
					background: #f79e6d;
					border-radius: 20rpx 0px 20rpx 20rpx;
					margin: 0 20rpx;
					color: #fff;

					&__top {
						display: flex;
						padding: 24rpx 0;
						margin: 0 20rpx;
						border-bottom: 2rpx solid rgba(255, 255, 255, 0.05);

						.my-icon {
							font-size: 80rpx;
						}

						&__container {
							margin-left: 20rpx;

							&>view:first-child {
								font-size: 36rpx;
								font-weight: 600;
								line-height: 52rpx;
							}

							&>view:last-child {
								font-size: 24rpx;
								color: rgba(255, 255, 255, 0.6);
								line-height: 36rpx;
							}
						}
					}

					&__bottom {
						font-size: 24rpx;
						font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.3);
						line-height: 36rpx;
						padding: 10rpx 20rpx;
					}
				}

				.chart-transfer-left {
					border-radius: 0rpx 20rpx 20rpx 20rpx;
				}
			}
		}

		.recall-message {
			width: 100%;
			text-align: center;
			font-size: 28upx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.8);
			line-height: 44upx;
		}

		.msgs-classic {
			min-width: 430upx;
			text-align: left;
			overflow: hidden;
			display: inline-block;
			padding: 0rpx 20rpx;
			background: #61bdb2;
			color: #ffffff;
			white-space: pre-line;
			word-break: break-word;
			background-blend-mode: multiply;
			box-sizing: border-box;
			border-radius: 20rpx 0rpx 20rpx 20rpx;
			margin: 0 24upx 0 104upx;
		}

		.card-left {
			margin: 0 104upx 0 24upx !important;
			background: #ffffff !important;
			border-radius: 0rpx 20rpx 20rpx 20rpx !important;
			color: #000000;
		}

		.card-box {
			padding-bottom: 0 !important;
			padding-top: 20rpx;

			.card-content {
				width: 100%;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.05);
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;

				.card-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					vertical-align: middle;
					margin-right: 20rpx;
				}

				.card-name {
					flex: 1;
					font-size: 28rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #ffffff;
					line-height: 40rpx;
				}
			}

			.card-bottom {
				font-size: 24rpx;
				font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.3);
				line-height: 36rpx;
				padding: 10rpx 0;
			}
		}

		.bottom-box {
			position: relative;
			z-index: 11;
			width: 100%;
			background: #ffffff;
			box-shadow: 0 0 10upx 0 rgba(204, 0, 51, 0.1);
			box-sizing: border-box;

			.input-line {
				position: relative;
				box-sizing: border-box;
				padding: 18upx 30upx;
				display: flex;
				align-items: center;

				.bottom-icon {
					font-size: 60rpx;
					width: 64rpx;
					height: 64rpx;
				}

				.send-icon {
					width: 64rpx;
					height: 64rpx;
				}

				.emoji-icon-ab {
					position: absolute;
					right: 120rpx;
				}

				.message-input {
					flex: 1;
					overflow: auto;
					min-height: 36upx;
					max-height: 200rpx;
					background: #f6f6f6;
					border-radius: 38upx;
					font-size: 28upx;
					font-weight: 400;
					color: #000000;
					box-sizing: border-box;
					padding: 0 40upx;
					padding: 20rpx 86rpx 20rpx 40rpx;
				}

				.record-box {
					line-height: 76upx;
					text-align: center;
				}


				.margin-left {
					margin-left: 24upx;
				}
			}

			.input-tools {
				display: flex;
				flex-flow: row wrap;
				padding: 20rpx 30rpx 10rpx;

				&__item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 33%;

					&__top {
						box-sizing: border-box;
						width: 120rpx;
						height: 120rpx;
						text-align: center;
						line-height: 120rpx;
						background: #f6f6f6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin: 0 auto;

						.tool-icon {
							font-size: 58rpx;
							color: #606665;
						}
					}

					&__bottom {
						margin: 10rpx 0 30rpx;
						font-size: 28rpx;
						font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
						font-weight: 400;
						color: #606665;
						line-height: 40rpx;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
						min-width: 120rpx;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.mr-l0 {
		margin-right: 10rpx;
	}

	.record-content {
		width: 480rpx;
		height: 130rpx;
		background: #ffffff;
		border-radius: 30rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transition: all 0.1s;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 30;
	}

	.record-content::after {
		position: absolute;
		content: "";
		width: 0px;
		height: 0px;
		border: 30rpx solid white;
		border-top-color: white;
		border-bottom-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		top: 130rpx;
	}

	.seconds {
		width: 368rpx;
		height: 24rpx;
		background-image: url("../../static/image/in_voice.png");
		background-size: 368rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ff5551;
	}

	.play-right {
		width: 48upx;
		height: 48upx;
	}

	/deep/ .uni-input-input {
		word-break: break-all;
		width: 90%;
	}
</style>